﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Routes.aspx.cs" Inherits="GPSTrackingWebsiteManager.Pages.Routes" %>

<!DOCTYPE html>

<link href="../../Css/GPSTrackingWebsite.css" rel="stylesheet" />
<link href="../../Css/messi.css" rel="stylesheet" />
<script src="../../Javascript/jquery-1.11.1.min.js"></script>
<script src="../../Javascript/messi.js"></script>
<script src="../../Javascript/Custom.js"></script>
<script src="../../Javascript/WindowMessageManager.js"></script>
<script src="../../Javascript/ObjectsV2.js"></script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">

            //Windows Message Manager 
            var objWindowsMessageManager = new WindowsMessageManager();

            var opener = GetRadWindow();
            var Routes = new Routes();

            var firstRouteHasGPSPoints = true;

            function GetRadWindow() {
                var oWindow = null;
                if (window.radWindow)
                    oWindow = window.radWindow;
                else if (window.frameElement.radWindow)
                    oWindow = window.frameElement.radWindow;
                return oWindow.BrowserWindow;
            }

            function initializeObjects() {
                opener.objMapControl.initializeRoutesObjects();
            }

            function clearObjects() {
                stopSlideMovement();
                
                if (getCkbSiNoShowRoute().checked) {
                    Routes.hideHistoryRoute(opener);
                }

                if (getCkbSiNoShowStops().checked) {
                    Routes.hideStopsMarkers(opener);
                }

                opener.objMapControl.setVisibleMarker(opener.objMapControl.GPSImeiRoute, false);
            }

            function restorePage() {
                
                if (getCkbSiNoShowRoute().checked) {
                    Routes.showHistoryRoute(opener);
                }

                if (getCkbSiNoShowStops().checked) {
                    Routes.showStopsMarkers(opener);
                }

                opener.objMapControl.setVisibleMarker(opener.objMapControl.GPSImeiRoute, true);
            }

            function loadRouteHistory() {
                if (Routes.isValidToLoadRoute(opener.globalGPSImei.imeiSelected, getDateSelected().get_textBox().value)) {
                    requestStart(getrpvRoutesUpdateControl());
                    Routes.enableDisableSliderRoute(false, getSliderRouter());
                    getBtnLoadRoute().disabled = true;
                    getBtnPlayPause().set_enabled(false);
                    //FirstSelection
                    firstRouteHasGPSPoints = true;
                    PageMethods.wsLoadRouteHistory(opener.globalGPSImei.imeiSelected, getFormatDate(getDateSelected().get_textBox().value), true, loadRouteHistoryFirstSelectionOk, loadRouteHistoryFirstSelectionError);
                }
            }

            function loadRouteHistoryFirstSelectionOk(stringCollection) {
                if (stringCollection == "") {
                    firstRouteHasGPSPoints = false;
                }

                Routes.openCollectionStringTrackDataByImeiFirsSelection(stringCollection, opener);
                //SecondSelection
                PageMethods.wsLoadRouteHistory(opener.globalGPSImei.imeiSelected, getFormatDate(getDateSelected().get_textBox().value), false, loadRouteHistorySecondSelectionOk, loadRouteHistorySecondSelectionError);
            }

            function loadRouteHistorySecondSelectionOk(stringCollection) {
                if (stringCollection == "") {
                    if (!firstRouteHasGPSPoints) {
                        objWindowsMessageManager.show_Info("No hay rutas definidas para la fecha seleccionada.", titles.RoutesHistoryTitle);
                        getBtnLoadRoute().value = "Cargar Ruta";
                        getBtnLoadRoute().disabled = false;
                        responseEnd(getrpvRoutesUpdateControl());
                        return "";
                    }
                }
                else {
                    Routes.openCollectionStringTrackDataByImeiSecondSelection(stringCollection, opener);
                }

                if (opener.globalList.trackDataByImei.length > 1) {
                    getBtnLoadRoute().value = "Cargando... 1%";
                    opener.globalRoutes.firstRoute = true;
                    opener.objMapControl.routes = [];
                    drawDrivingRoute(opener);
                }
                else {
                    objWindowsMessageManager.show_Info("No hay rutas definidas para la fecha seleccionada.", titles.RoutesHistoryTitle);
                    getBtnLoadRoute().value = "Cargar Ruta";
                    getBtnLoadRoute().disabled = false;
                    responseEnd(getrpvRoutesUpdateControl());
                }
            }

            function loadRouteHistoryFirstSelectionError(error) {
                objWindowsMessageManager.show_Error(error.get_message());
                responseEnd(getrpvRoutesUpdateControl());
            }

            function loadRouteHistorySecondSelectionError(error) {
                objWindowsMessageManager.show_Error(error.get_message());
                responseEnd(getrpvRoutesUpdateControl());
            }

            function drawDrivingRoute(opener) {
                opener.globalRoutes.currentGpsPoint = 0;
                opener.globalRoutes.firstRoute = true;
                opener.objMapControl.clearStopsMarkers();
                opener.objMapControl.clearPeopleCounterMarkers();
                opener.globalRoutes.peopleTotalIn = -1;
                opener.globalRoutes.peopleTotalOut = -1;
                Routes.showHistoryRoute(opener);
                opener.globalRoutes.doesnWorkDrawRoute = false;
                opener.globalRoutes.lastOne = false;
                opener.globalRoutes.mtsRoute = opener.globalRoutes.mtsRouteStar;
                opener.globalRoutes.refreshIntervalId = setInterval(drawDrivingRouteTimer, 100);
                responseEnd(getrpvRoutesUpdateControl());
            }

            function drawDrivingRouteTimer() {

                if (opener.globalList.trackDataByImei.length > 1) {
                    var lstart = 0;

                    var existsMarker = false;
                    var stopTimes = 0;
                    var initialStop = 0;

                    for (opener.globalRoutes.currentGpsPoint = opener.globalRoutes.currentGpsPoint; opener.globalRoutes.currentGpsPoint < opener.globalList.trackDataByImei.length - 2; opener.globalRoutes.currentGpsPoint++) {
                        getBtnLoadRoute().value = "Cargando..." + formatTwoDecimals((opener.globalRoutes.currentGpsPoint / opener.globalList.trackDataByImei.length) * 100) + "%";


                        /*if (opener.globalRoutes.peopleTotalIn == -1 && opener.globalRoutes.peopleTotalOut == -1) {
                            opener.globalRoutes.peopleTotalIn = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalIn;
                            opener.globalRoutes.peopleTotalOut = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalOut;
                        }*/

                        /*if (opener.globalRoutes.peopleTotalIn != opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalIn || opener.globalRoutes.peopleTotalOut != opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalOut) {// && (opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalIn == opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint + 1].peopleTotalIn))){// || (opener.globalRoutes.peopleTotalOut != opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalOut && opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalOut == opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint + 1].peopleTotalOut)) {
                            var myPeopleCounterMarker = new PeopleCounterMarker();

                            myPeopleCounterMarker.setPeopleCounterMarker(opener.objMapControl.addPeopleCounterMarker(images.locationPeopleCounter, opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].position, ""), opener.objMapControl.addInfoWindow(), opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleIn, opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleOut, opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalInside, opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalIn, opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalOut);

                            //if (!getCkbSiNoShowStops().checked) {
                            //    myStopMarker.stopMarker.setVisible(false);
                            //}

                            opener.globalList.peopleCounterMarkers.push(myPeopleCounterMarker);

                            opener.globalRoutes.peopleTotalIn = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalIn;
                            opener.globalRoutes.peopleTotalOut = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].peopleTotalOut;
                        }*/









                        if (lstart == 0) {
                            if (opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint + 1].currentKm - opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].currentKm >= opener.globalRoutes.mtsRoute) {
                                if (opener.globalRoutes.doesnWorkDrawRoute) {
                                    opener.globalRoutes.doesnWorkDrawRoute = false;
                                    lstart = 0;
                                    opener.globalRoutes.destination = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].position;
                                    opener.objMapControl.getDrivingRoute();
                                    return;
                                }
                                else {
                                    lstart = 1;
                                    opener.globalRoutes.origin = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].position;
                                    if (opener.globalList.stopsMarkers.length > 0 && opener.globalList.stopsMarkers[opener.globalList.stopsMarkers.length - 1].finalTimeStop == null) {
                                        opener.globalList.stopsMarkers[opener.globalList.stopsMarkers.length - 1].finalTimeStop = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].hour;
                                    }
                                }
                            }
                            else {
                                if (opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint + 1].currentKm - opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].currentKm < opener.globalRoutes.mtsStop) {
                                    if (!existsMarker) {
                                        if (initialStop == 0) {
                                            initialStop = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].hour;
                                        }
                                        if (stopTimes > opener.globalRoutes.timesStop) {

                                            var myStopMarker = new StopMarker();

                                            myStopMarker.setStopMarker(opener.objMapControl.addStopMarker(images.locationStop, opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].position, ""), opener.objMapControl.addInfoWindow(), initialStop);

                                            if (!getCkbSiNoShowStops().checked) {
                                                myStopMarker.stopMarker.setVisible(false);
                                            }

                                            opener.globalList.stopsMarkers.push(myStopMarker);

                                            existsMarker = true;
                                        }
                                        else {
                                            stopTimes++;
                                        }
                                    }
                                    else {
                                        if (opener.globalList.stopsMarkers.length > 0) {
                                            opener.globalList.stopsMarkers[opener.globalList.stopsMarkers.length - 1].finalTimeStop = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].hour;
                                        }
                                    }
                                }
                            }
                        } else {
                            if ((opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint + 1].currentKm - opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].currentKm < opener.globalRoutes.mtsRoute) || (Routes.changeDirectionPosition(opener, opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].position, opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint + 1].position))) {
                                lstart = 0;
                                opener.globalRoutes.destination = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint + 1].position;

                                opener.objMapControl.getDrivingRoute();
                                return;
                            }
                        }
                    }
                    if (lstart = 1) {
                        opener.globalRoutes.destination = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint + 1].position;
                        opener.globalRoutes.lastOne = true;

                        if (opener.globalList.stopsMarkers.length > 0 && opener.globalList.stopsMarkers[opener.globalList.stopsMarkers.length - 1].finalTimeStop == null) {
                            opener.globalList.stopsMarkers[opener.globalList.stopsMarkers.length - 1].finalTimeStop = opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].hour;
                        }

                        setTimeout(opener.objMapControl.getDrivingRoute, 1000);
                    }
                    if (opener.globalList.stopsMarkers.length > 0) {
                        if (opener.globalList.stopsMarkers[opener.globalList.stopsMarkers.length - 1].finalTimeStop == null) {
                            opener.globalList.stopsMarkers[opener.globalList.stopsMarkers.length - 1].finalTimeStop = "No definida, continúa hasta el siguiente día.";//opener.globalList.trackDataByImei[opener.globalRoutes.currentGpsPoint].hour;
                        }
                    }
                    drawDrivingRouteFinish();
                }


            }

            function drawDrivingRouteFinish() {
                clearInterval(opener.globalRoutes.refreshIntervalId);
                getBtnLoadRoute().value = "Cargar Ruta";
                getBtnLoadRoute().disabled = false;
                getBtnPlayPause().set_enabled(true);

                slider = getSliderRouter();
                slider.set_maximumValue(opener.globalList.trackDataByImei.length - 1);

                opener.globalRoutes.currentSlideRouteNumber = 0;

                if (opener.globalList.trackDataByImei.length > 0) {
                    var imei = opener.globalGPSImei.imeiSelected//getImeiValueTreeVehicleSelected();
                    var index = Routes.getIndexImei(opener.globalMasterPage.trackDataLastLocationList, imei);
                    if (index != -1) {
                        opener.objMapControl.setIconMarker(opener.objMapControl.GPSImeiRoute, opener.globalMasterPage.trackDataLastLocationList[index].image);
                    }

                    updateCurrentPositionRouteHistory(opener.globalRoutes.currentSlideRouteNumber);

                    slider.set_value(0);

                    getlbKmFinal().innerHTML = formatTwoDecimals(opener.globalList.trackDataByImei[opener.globalList.trackDataByImei.length - 1].currentKm) + " kms";
                    Routes.enableDisableSliderRoute(true, getSliderRouter());
                }
                else {
                    Routes.enableDisableSliderRoute(false, getSliderRouter());
                }
            }

            function ckbSiNoCenterRouteChecked() {
                opener.globalRoutes.isCenterRoute = getCkbSiNoCenterRoute().checked;
            }

            function ckbSiNoCenterGPSImeiChecked() {
                opener.globalRoutes.isCenterGPSImei = getCkbSiNoCenterGPSImei().checked;
            }

            function updateSlideVisibleSpeed(sender, args) {

                var slideValue = sender.get_value();
                opener.globalRoutes.speedRouteHistory = 1100 - (slideValue * 100);

                if (opener.globalRoutes.slideInterval != null) {
                    window.clearInterval(opener.globalRoutes.slideInterval);
                    opener.globalRoutes.slideInterval = null;
                    opener.globalRoutes.slideInterval = window.setInterval('selectNextSlideRoute()', opener.globalRoutes.speedRouteHistory);
                }
            }

            function selectNextSlideRoute() {

                var slider = getSliderRouter();

                if (opener.globalRoutes.currentSlideRouteNumber < opener.globalList.trackDataByImei.length) {
                    updateCurrentPositionRouteHistory(opener.globalRoutes.currentSlideRouteNumber);
                }

                var slideNumber = opener.globalRoutes.currentSlideRouteNumber + 1;
                if (slideNumber >= opener.globalList.trackDataByImei.length) {
                    //getBtnPlayPause().checked = !getBtnPlayPause().checked;
                    getBtnPlayPause().set_selectedToggleStateIndex(1);
                    getBtnPlayPause().set_checked(false);
                    stopSlideMovement();
                }
                else {
                    slider.set_value(slideNumber);
                }
            }

            function updateCurrentPositionRouteHistory(slideNumber) {
                opener.objMapControl.setPositionMarker(opener.objMapControl.GPSImeiRoute, opener.globalList.trackDataByImei[slideNumber].position);
                getlbKmActual().innerText = formatTwoDecimals(opener.globalList.trackDataByImei[slideNumber].currentKm) + " kms";
                getlbKmTime().innerText = opener.globalList.trackDataByImei[slideNumber].hour;
                opener.objMapControl.getDirectionFromPosition(opener.globalList.trackDataByImei[slideNumber].position);
                getlbDirection().innerText = opener.globalRoutes.direction;
                centerMapChecked(opener.globalList.trackDataByImei[slideNumber].position);
            }

            function centerMapChecked(location) {
                if (opener.globalRoutes.isCenterGPSImei) {
                    opener.objMapControl.centerMap(location);
                }
            }

            function updateSlideVisibleRoute(sender, args) {

                var slider = sender;

                updateSliderRoute(slider.get_value());

                if (opener.globalRoutes.currentSlideRouteNumber < opener.globalList.trackDataByImei.length) {
                    updateCurrentPositionRouteHistory(opener.globalRoutes.currentSlideRouteNumber);
                }
            }

            function updateSliderRoute(slideNumber) {
                opener.globalRoutes.currentSlideRouteNumber = slideNumber;
            }

            function showHideHistoryRoute() {
                var ckbSiNoShowRoute = getCkbSiNoShowRoute();
                if (ckbSiNoShowRoute.checked) {
                    Routes.showHistoryRoute(opener);
                }
                else {
                    Routes.hideHistoryRoute(opener);
                }
            }

            function showOrhideStopsMarkers() {
                if (getCkbSiNoShowStops().checked) {
                    Routes.showStopsMarkers(opener);
                }
                else {
                    Routes.hideStopsMarkers(opener);
                }
            }

            function playStopSlideMovement(sender, args) {
                if (getBtnPlayPause().get_checked()) {
                    playSlideMovement();
                }
                else {
                    stopSlideMovement();
                }
                /*if (!args.get_checked()) {
                    playSlideMovement();
                }
                else {
                    stopSlideMovement();
                }*/
            }

            function playSlideMovement() {
                opener.globalRoutes.slideInterval = window.setInterval('selectNextSlideRoute()', opener.globalRoutes.speedRouteHistory);
            }

            function stopSlideMovement() {
                if (!opener.globalRoutes.slideInterval) return;
                window.clearInterval(opener.globalRoutes.slideInterval);
                opener.globalRoutes.slideInterval = null;
            }

            function getlbKmFinal() {
                return $get('<%= lbKmFinal.ClientID %>');//.innerText;
            }

            function getlbDirection() {
                return $get('<%= lbDirection.ClientID %>');//.innerText;
        }

        function getCkbSiNoCenterRoute() {
            return $get('<%= ckbSiNoCenterRoute.ClientID %>');
        }

        function getCkbSiNoCenterGPSImei() {
            return $get('<%= ckbSiNoCenterGPSImei.ClientID %>');
        }

        function getrpvRoutesUpdateControl() {
            return "<%= RadSliderRoute.ClientID %>";
        }

        function getBtnLoadRoute() {
            return $get('btnCargarRuta');
        }

        function getBtnPlayPause() {
            return $find('<%= btnPlayPause.ClientID %>');
        }

        function getSliderRouter() {
            return $find('<%= RadSliderRoute.ClientID %>');
        }

        function requestStart(object) {
            try {
                $find("<%= RadAjaxLoadingPanel1.ClientID%>").show(object);
            }
            catch (e) {
                null;
            }
        }

        function responseEnd(object) {
            //hide the loading panel and clean up the global variables 
            try {
                $find("<%= RadAjaxLoadingPanel1.ClientID%>").hide(object);
            }
            catch (e) {
                null;
            }
        }

        function getDateSelected() {
            return $find('<%= dateSelected.ClientID %>');
        }

        function getCkbSiNoShowRoute() {
            return $get('<%= ckbSiNoShowRoute.ClientID %>');
        }

        function getlbKmActual() {
            return $get('<%= lbKmActual.ClientID %>');//.innerText;
        }

        function getlbKmTime() {
            return $get('<%= lbTime.ClientID %>');//.innerText;
        }

        function getCkbSiNoShowStops() {
            return $get('<%= ckbSiNoShowStops.ClientID %>');
        }

        </script>
    </telerik:RadScriptBlock>
</head>
<body onload="initializeObjects()">
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true"></telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="AjaxControlID1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Loading" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        

        <telerik:RadTabStrip ID="rtsRoutes" runat="server" SelectedIndex="0" MultiPageID="rmpRoutes"></telerik:RadTabStrip>
        <telerik:RadMultiPage ID="rmpRoutes" runat="server" SelectedIndex="0">
            <telerik:RadPageView ID="rpvRoutes" runat="server">
                <div class="left">
                    <fieldset>
                        <legend>Paso1. Seleccione la fecha</legend>
                        <div style="height: 50px; width: 171px;">
                            <telerik:RadDatePicker ID="dateSelected" runat="server" Style="text-align: center" Height="24px" Width="176px">
                                <Calendar UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False" ViewSelectorText="x">
                                </Calendar>
                                <DateInput DateFormat="dd/MM/yyyy" DisplayDateFormat="dd/MM/yyyy" Height="24px" LabelWidth="40%">
                                </DateInput>
                            </telerik:RadDatePicker>
                            <br />
                            <input id="btnCargarRuta" type="button" value="Cargar Ruta" onclick="loadRouteHistory();" />
                        </div>
                    </fieldset>
                    <fieldset>
                        <legend>Velocidad</legend>
                        <telerik:RadSlider ID="RadSlider2" runat="server" Height="20px" ItemType="None" MaximumValue="11" MinimumValue="1" OnClientLoad="updateSlideVisibleSpeed" OnClientValueChanged="updateSlideVisibleSpeed" TrackPosition="Center" Value="1" Width="100%">
                        </telerik:RadSlider>
                    </fieldset>
                </div>
                <div class="left center">
                    <fieldset>
                        <legend>Paso 2. Reproducir ruta</legend>
                        <telerik:RadSlider ID="RadSliderRoute" runat="server" Height="40px" ItemType="Tick" MaximumValue="100" OnClientLoad="updateSlideVisibleRoute" OnClientValueChanged="updateSlideVisibleRoute" TrackPosition="Center" Value="0" Width="600px">
                        </telerik:RadSlider>
                        Dirección de la calle / cuidad
                    <br />
                        <asp:Label ID="lbDirection" runat="server" Style="text-align: center" Text="..." Width="600px"></asp:Label>
                        <br />
                        <telerik:RadButton ID="btnPlayPause" runat="server" Checked="false" Height="32px" OnClientCheckedChanged="playStopSlideMovement" ToggleType="CheckBox" Width="32px" AutoPostBack="False" Enabled="False">
                            <ToggleStates>
                                <telerik:RadButtonToggleState ImageUrl="../../Template/Icons/32px/Button-Play-icon.png" Text="Play" />
                                <telerik:RadButtonToggleState ImageUrl="../../Template/Icons/32px/Button-Pause-icon.png" Selected="true" Text="Pause" />
                            </ToggleStates>
                        </telerik:RadButton>
                    </fieldset>
                </div>
                <div class="left center">
                    <fieldset>
                        <legend>Opciones</legend>
                        <asp:CheckBox ID="ckbSiNoCenterGPSImei" runat="server" Text="Centrar dispositivo" Checked="true" onclick="javascript:ckbSiNoCenterGPSImeiChecked()" />
                        <br />
                        <asp:CheckBox ID="ckbSiNoShowRoute" runat="server" onclick="javascript:showHideHistoryRoute()" Text="Mostrar ruta" Checked="true" />
                        <br />
                        <asp:CheckBox ID="ckbSiNoCenterRoute" runat="server" Text="Centrar Ruta" Checked="true" onclick="javascript:ckbSiNoCenterRouteChecked()" />
                        <br />
                        <asp:CheckBox ID="ckbSiNoShowStops" runat="server" onclick="javascript:showOrhideStopsMarkers()" Text="Mostrar Donde se Detuvo" Checked="true" />
                        <br />
                    </fieldset>
                </div>
                <br />
                <div class="left" style="width:640px">
                    <fieldset>
                        <legend>Información de la reproducción</legend>
                        <div class="left">
                              Hora Reproducción:
                            <br />
                        Kilometros Reproducción:
                             <br />
                        Total Kilometros:
                        </div>
                        <div class="left">
                            <asp:Label ID="lbTime" runat="server" Style="text-align: center" Text="..." Width="100px"></asp:Label>
                            <br />
                        <asp:Label ID="lbKmActual" runat="server" Style="text-align: center" Text="0.0 Km" Width="100px"></asp:Label>
                         <br />
                        <asp:Label ID="lbKmFinal" runat="server" Style="text-align: center" Text="0.0 Km" Width="100px"></asp:Label>
                            </div>
                        <div class="left">
                            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
                        </div>
                        <br />
                        <br />
                        <br />
                        <br />
                    </fieldset>
                </div>
            </telerik:RadPageView>
        </telerik:RadMultiPage>        
    </form>
</body>
</html>
